<!doctype html>
<html>
<head>

	<link rel="stylesheet" type="text/css" href="estilos.css"/>
	<meta charset="UTF-8"/>
    <style>
      #map_canvas {
        width: 650px;
        height: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-24.005343, -46.412534);
  var mapOptions = {
    zoom: 18,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Erro: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

<script type="text/javascript" src="funcoes.js"></script>
 
<meta charset="utf-8">
<title>TRANSMAGNUS - Sistema para Transportadora de Veículos</title>
</head>

<body>

<div class="maindiv" id="maindiv1">

  <table id="mapstable">
    <tr>
    <td width="331" valign="top"><table width="100%" border="0">
      <tr>
            <td>
                <lable id="labelid">Ponto de Saida</lable></td>
      </tr>
      <tr>
        <td><lable>
          <input name="textfield" type="text" id="address" size="50">
        </lable></td>
      </tr>
      <tr>
        <td height="30" valign="bottom"><lable id="labelid">Destino</lable></td>
      </tr>
      <tr>
        <td><lable id="labelid">
          <input name="textfield2" type="text" id="textfield2" size="50">
        </lable></td>
      </tr>
      <tr>
        <td height="26" align="right" valign="top"><lable>
          <p>
            <img src="../Images/btn_rota.png" width="158" height="45"  alt="Clique para consultar a rota inserida." title="Clique para consultar a rota inserida." onclick="codeAddress()"/> </p>
</lable></td>
      </tr>
      <tr>
        <td height="42" align="center"><lable id="labelid">Rotas Sugeridas</lable></td>
      </tr>
      <tr>
        <td height="80" align="center" valign="middle">
        <div class="rotasdiv" id="rotasdiv">
          <table width="100%" height="150" border="0">
            <tr>
              <td id="sugtable" width="73%" height="118" valign="top"><p>R. Oswaldo e Av. Presidente Costa e Silva</p></td>
              <td width="1%" bgcolor="#000000">&nbsp;</td>
              <td width="26%" align="center" valign="top" id="sugtable2"><p>900m 3min</p></td>
            </tr>
          </table>
        </div>
        </td>
      </tr>
    </table>
    
    </td>
    <td width="787" align="right">
    <div id="map_canvas"></div>
    </td>
    </tr>
  </table>
    
</div>

<div class="topdiv" id="topdiv1">
  <table id="toptable" width="100%" border="0">
    <tr>
      <td width="38%" height="48" valign="middle"><lable id="pagename"> Monitoramento De Rotas</lable></td>
      <td width="25%"><input onfocus="this.value=''" name="googlesearch" type="search" id="searchbox" value="Pesquisa" size="50" alt="Campo de pesquisa." title="Campo de pesquisa."></td>
      <td width="4%"><img src="../Images/pesquisa.png" width="38" height="35"  alt="Pesquisa" title="Pesquisar no Site" onclick="gotopes()"/></td>
      <td width="27%" align="right"><lable id="username">Ana Maria</lable></td>
      <td width="6%" align="center"><a href="page_login.html" id="linkexit" alt="Retorna a página de login." title="Retorna a página de login"><lable id="exit">Sair</lable></a></td>
    </tr>
  </table>

          <nav>
            <ul>           
                <li><a href="#" id="dropmenu" alt="Opções de Cadastro." title="Opções de Cadastro." >Cadastro</a>
   			  				<ul>
                                <li><a href="page_cad_pedidos.html" id="dropmenu" alt="Pagina de cadastro de Pedidos." title="Pagina de cadastro de Pedidos.">Pedido</a></li>
                                <li><a href="page_cad_clientes.html" id="dropmenu" alt="Pagina de cadastro de Clientes." title="Pagina de cadastro de Clientes.">Cliente</a></li>
                                <li><a href="page_cad_funcionario.html" id="dropmenu" alt="Pagina de cadastro de Funcionários." title="Pagina de cadastro de Funcionários.">Funcionario</a></li>
							</ul>
              </li>
                <li><a href="page_cons_pedidos.html" id="dropmenu" alt="Pagina de consulta de Pedidos." title="Pagina de consulta de Pedidos.">Pedidos</a></li>
                <li><a href="page_cons_clientes.html" id="dropmenu" alt="Pagina de consulta de Clientes." title="Pagina de consulta de Clientes.">Clientes</a></li>
                <li><a href="page_cons_funcionario.html" id="dropmenu" alt="Pagina de consulta de Funcionários." title="Pagina de consulta de Funcionários.">Funcionários</a></li> 
                <li><a href="#" id="dropmenu" alt="Opções de Monitoramento." title="Opções de Monitoramento.">Monitoramento</a>
                            <ul>
                                <li><a href="page_mon_live.html" id="dropmenu" alt="Pagina de Monitoramento ao vivo de Pedidos em transporte." title="Pagina de Monitoramento ao vivo de Pedidos em transporte.">Ao Vivo</a></li>
                                <li><a href="page_mon_rotas.html" id="dropmenu" alt="Pagina de Monitoramento de Rotas." title="Pagina de Monitoramento de Rotas.">Rotas</a></li>
							</ul>
                 </li>
                <li><a href="page_suporte.html" id="dropmenu" alt="Pagina de contato ao desenvolvedor." title="Pagina de contato ao desenvolvedor.">Suporte</a></li>                     
            </ul>
        </nav>

			<lable id="dot1">...</lable>
            <lable id="dot2">...</lable>
</div>
<div class="botdiv" id="botdiv1"><a href="page_bem-vindo.html"><img src="../Images/truck.png" id="imgtruck" width="263" height="104"  alt="Clique no logo da empresa para retornar a tela principal" title="Retorna a tela principal"/></a>
      <table id="bottable" width="80%" border="0">
        <tr>
          <td width="75%" align="center">Copyright© TRANSMAGNUS, Todos os direitos reservados.</td>
          <td width="25%" align="right"><img src="../Images/help.png" width="40" height="40"  alt="Imagem de Ajuda. Clique para acessar o manual." title="Ajuda" onclick="window.open('ajuda.html','targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=400px,height=600px')"/>   <img src="../Images/accessible_sign.png" width="38" height="38"  alt="Este site suporta recursos de acessibilidade." title="Este site suporta recursos de acessibilidade."/>   <a href="javascript:window.print()"><img src="../Images/printer.png" width="42" height="42"  alt="Imprime página atual" title="Imprimir Página"/></a> </td>
        </tr>
      </table>
</div>    
    
</body>
</html>
